<template>
  <view class="maintenance-container">
    <!-- 搜索和筛选区域 -->
    <view class="search-filter-section">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <input 
          class="search-input" 
          placeholder="输入需要搜索的内容" 
          v-model="searchKeyword"
          @input="onSearchInput"
        />
        <image src="/static/maintenance-img/搜索.png" class="search-icon" />
      </view>
      
      <!-- 筛选选项 -->
      <view class="filter-options">
        <view class="filter-item">
          <text class="filter-label">共{{ filteredTasks.length }}条</text>
        </view>
        
        <view class="filter-item" @click="toggleDropdown('status')">
          <view class="filter-row">
            <text class="filter-label">状态</text>
            <view class="filter-value">
              <text>{{ selectedStatus }}</text>
              <image 
                src="/static/maintenance-img/收起箭头小 拷贝.png" 
                class="dropdown-icon" 
                :class="{ 'rotated': showDropdowns.status }"
                mode="aspectFit"
              />
            </view>
          </view>
          <!-- 状态下拉菜单 -->
          <view v-if="showDropdowns.status" class="dropdown-overlay" @click="toggleDropdown('status')">
            <view class="dropdown-menu" @click.stop>
              <view 
                v-for="status in statusOptions" 
                :key="status"
                class="dropdown-option"
                :class="{ 'active': selectedStatus === status }"
                @click.stop="selectOption('status', status)"
              >
                {{ status }}
              </view>
            </view>
          </view>
        </view>
        
        <view class="filter-item" @click="toggleDropdown('method')">
          <view class="filter-row">
            <text class="filter-label">维修方式</text>
            <view class="filter-value">
              <text>{{ selectedMethod }}</text>
              <image 
                src="/static/maintenance-img/收起箭头小 拷贝.png" 
                class="dropdown-icon" 
                :class="{ 'rotated': showDropdowns.method }"
                mode="aspectFit"
              />
            </view>
          </view>
          <!-- 维修方式下拉菜单 -->
          <view v-if="showDropdowns.method" class="dropdown-overlay" @click="toggleDropdown('method')">
            <view class="dropdown-menu" @click.stop>
              <view 
                v-for="method in methodOptions" 
                :key="method"
                class="dropdown-option"
                :class="{ 'active': selectedMethod === method }"
                @click.stop="selectOption('method', method)"
              >
                {{ method }}
              </view>
            </view>
          </view>
        </view>
        
        <view class="filter-item" @click="showDateFilter">
          <text class="filter-label">日期</text>
          <image 
            src="/static/maintenance-img/日期.png" 
            class="calendar-icon"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>
    
    <!-- 维修任务列表 -->
    <view class="task-list">
      <view 
        v-for="(task, index) in filteredTasks" 
        :key="index"
        class="task-card"
      >
        <view class="task-header">
          <text class="task-number">维修单号: {{ task.orderNumber }}</text>
          <text class="task-status" :class="getStatusClass(task.status)">{{ task.status }}</text>
        </view>
        
        <view class="task-content">
          <view class="task-info">
            <text class="info-label">维修方式:</text>
            <text class="info-value">{{ task.repairMethod }}</text>
          </view>
          
          <view class="task-info">
            <text class="info-label">预约日期:</text>
            <text class="info-value">{{ task.appointmentDate }}</text>
          </view>
        </view>
        
        <view class="task-actions">
          <button class="detail-btn" @click.stop="viewTaskDetail(task)">查看详情</button>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-if="filteredTasks.length === 0" class="empty-state">
      <image src="/static/maintenance-img/组 8.png" class="empty-icon" />
      <text class="empty-text">暂无维修任务</text>
      <text class="empty-desc">您还没有任何维修任务记录</text>
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      selectedStatus: '全部',
      selectedMethod: '全部',
      showDropdowns: {
        status: false,
        method: false
      },
      statusOptions: ['全部', '进行中', '已完成'],
      methodOptions: ['全部', '到店维修', '上门取车'],
      tasks: [
        {
          id: 1,
          orderNumber: '3535252',
          status: '进行中',
          repairMethod: '到店维修',
          appointmentDate: '2023-03-18 11:00',
          description: '发动机故障维修'
        },
        {
          id: 2,
          orderNumber: '3535253',
          status: '已完成',
          repairMethod: '上门取车',
          appointmentDate: '2023-03-18 11:00',
          description: '刹车系统检查'
        },
        {
          id: 3,
          orderNumber: '3535254',
          status: '进行中',
          repairMethod: '上门取车',
          appointmentDate: '2023-03-18 11:00',
          description: '轮胎更换服务'
        }
      ]
    }
  },
  
  computed: {
    filteredTasks() {
      let filtered = this.tasks;
      
      // 按状态筛选
      if (this.selectedStatus !== '全部') {
        filtered = filtered.filter(task => task.status === this.selectedStatus);
      }
      
      // 按维修方式筛选
      if (this.selectedMethod !== '全部') {
        filtered = filtered.filter(task => task.repairMethod === this.selectedMethod);
      }
      
      // 按搜索关键词筛选
      if (this.searchKeyword) {
        filtered = filtered.filter(task => 
          task.orderNumber.includes(this.searchKeyword) ||
          task.description.includes(this.searchKeyword) ||
          task.repairMethod.includes(this.searchKeyword)
        );
      }
      
      return filtered;
    }
  },
  
  onLoad() {
    this.loadTasks();
  },
  
  methods: {
    // 加载维修任务
    loadTasks() {
      console.log('加载维修任务数据');
      // 这里可以从API获取真实的维修任务数据
    },
    
    // 搜索输入
    onSearchInput() {
      console.log('搜索关键词:', this.searchKeyword);
    },
    
    // 切换下拉菜单显示/隐藏
    toggleDropdown(type) {
      console.log(`点击${type}下拉，当前状态:`, this.showDropdowns[type]);
      
      // 关闭其他下拉菜单
      Object.keys(this.showDropdowns).forEach(key => {
        if (key !== type) {
          this.showDropdowns[key] = false;
        }
      });
      
      // 切换当前下拉菜单
      this.showDropdowns[type] = !this.showDropdowns[type];
      
      console.log(`${type}下拉切换后:`, this.showDropdowns[type]);
    },
    
    // 选择下拉选项
    selectOption(type, value) {
      console.log(`选择${type}选项:`, value);
      
      if (type === 'status') {
        this.selectedStatus = value;
      } else if (type === 'method') {
        this.selectedMethod = value;
      }
      
      // 关闭下拉菜单
      this.showDropdowns[type] = false;
      
      console.log(`选择后${type}:`, value);
    },
    
    // 显示日期筛选
    showDateFilter() {
      uni.showToast({
        title: '日期筛选功能开发中',
        icon: 'none'
      });
    },
    
    // 查看任务详情
    viewTaskDetail(task) {
      console.log('查看任务详情:', task);
      uni.navigateTo({
        url: `/lj/maintenance/repair-details?orderNumber=${task.orderNumber}&ownerName=${encodeURIComponent(task.customerName || '张')}&contactPhone=${task.customerPhone || '1993829282'}&repairMethod=${encodeURIComponent(task.repairMethod)}&appointmentDate=${encodeURIComponent(task.appointmentDate)}`,
        success: () => {
          console.log('跳转到维修详情页面成功');
        },
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      switch (status) {
        case '进行中':
          return 'status-progress';
        case '已完成':
          return 'status-completed';
        case '已取消':
          return 'status-cancelled';
        default:
          return '';
      }
    }
  }
}
</script>
<style scoped>
.maintenance-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

/* 页面背景色区域 - 顶部蓝色区域 */
.maintenance-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 350rpx; /* 蓝色区域高度 */
    background-color: #3184FD;
    z-index: 0; /* 在页面内容下方 */
}

.search-filter-section {
  background-color: transparent;
  padding: 20rpx 30rpx 40rpx;
  position: relative;
  z-index: 10;
}

.search-bar {
  position: relative;
  margin-bottom: 30rpx;
}

.search-input {
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 60rpx 0 30rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.search-icon {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 32rpx;
  height: 32rpx;
  opacity: 1;
  display: block;
}

.filter-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20rpx;
  position: relative;
  z-index: 10;
}

.filter-item {
  position: relative;
  padding: 10rpx 0;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.filter-label {
  font-size: 24rpx;
  color: #fff;
  white-space: nowrap;
}

.filter-value {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  position: relative;
}

.filter-value text {
  font-size: 24rpx;
  color: #fff;
}

.dropdown-icon,
.calendar-icon {
  width: 28rpx;
  height: 28rpx;
  transition: transform 0.3s ease;
  opacity: 1;
  display: block;
  flex-shrink: 0;
}

.dropdown-icon.rotated {
  transform: rotate(180deg);
}

/* 下拉菜单遮罩层 */
.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  background-color: transparent;
}

.dropdown-menu {
  position: fixed;
  top: 180rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  z-index: 99999;
  overflow: hidden;
  min-width: 160rpx;
  max-width: 240rpx;
  border: 1rpx solid #e8e8e8;
  max-height: 200rpx;
  overflow-y: auto;
  display: block;
  width: auto;
}

.dropdown-option {
  padding: 16rpx 20rpx;
  font-size: 24rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option:hover {
  background-color: #f8f9fa;
}

.dropdown-option.active {
  background-color: #0a78ff;
  color: #fff;
  font-weight: 500;
}

.dropdown-option.active:hover {
  background-color: #0056b3;
}

.task-list {
  padding: 20rpx 30rpx;
  position: relative;
  z-index: 0;
  margin-top: -50rpx;
}

.task-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.task-number {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.task-status {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
}

.status-progress {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-completed {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.status-cancelled {
  background-color: #ffebee;
  color: #d32f2f;
}

.task-content {
  margin-bottom: 20rpx;
}

.task-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.info-label {
  font-size: 24rpx;
  color: #666;
  margin-right: 10rpx;
  min-width: 120rpx;
}

.info-value {
  font-size: 24rpx;
  color: #333;
}

.task-actions {
  display: flex;
  justify-content: flex-end;
}

.detail-btn {
  background-color: #0a78ff;
  color: #fff;
  border: none;
  border-radius: 20rpx;
  padding: 16rpx 32rpx;
  font-size: 20rpx;
  font-weight:400;
  margin-right: 10rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  text-align: center;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: #999;
}

</style>

